<template>
  <div class="dialog-container">
    <el-dialog
      :title="title"
      v-model="open"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-table :data="replyList">
        <el-table-column label="回复内容" prop="content" />
        <el-table-column label="回复时间" prop="createTime" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="auto"
        >
          <template #default="{ row }">
            <el-button size="small" type="text" icon="Delete" @click="delReplyEvaluate(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getReplyList, delReplyEvaluateById } from '@/api/reply/reply'
import { ElMessage } from 'element-plus'

// 定义组件名称
defineOptions({
  name: 'replyList',
})

interface ReplyItem {
  id?: number
  content?: string
  createTime?: string
  [key: string]: any
}

interface Props {
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
})

const open = defineModel<boolean>('open', { default: false })

const replyList = ref<ReplyItem[]>([])
const evaluateId = ref<string | number>('')

const getList = (id: string | number) => {
  evaluateId.value = id
  getReplyList(id).then((res) => {
    if (res.code == 200) {
      replyList.value = res.data
    }
  })
}

const delReplyEvaluate = (id: number) => {
  delReplyEvaluateById(id).then((res) => {
    if (res.code == 200) {
      ElMessage.success(res.msg)
    } else {
      ElMessage.error(res.msg)
    }
    getList(evaluateId.value)
  })
}

// 对外暴露方法
defineExpose({
  getList,
})
</script>

<style scoped></style>
